<template>
  <div class="back-top" ref="backTop">
    <div class="back-top-content">
      <img src="../pages/image/backtop.png" alt="" class=" small" @click="backTop()">
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

export default {
  name: 'bakcTop',
  methods: {
    backTop() {
     document.documentElement.scrollTop = 0; 
    }
  }
};

</script>

<style lang="css" scoped>
  .back-top {
    transition: all .2 linear;
    cursor: pointer;
    width: 44px;
    height: 44px;
    position: fixed;
    bottom: 180px; 
    right: 36px;
    bottom: 8%;
    padding: 5px;
    z-index: 88;
  }
    .back-top-content {
      position: relative;
      color: #bbbbbb;
      background-color: #ffffff;
      border: 1px solid #cccccc;
      line-height: 60px;
      border-radius: 50%;
      width: 100%;
      height: 100%;
      font-size: 12px;
      text-align: center;
    }
      .small {
        color: #999999;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        font-size: 20px;
        line-height: 24px;
      }
     
</style>
